function enlarge() {
    $('.small ul li').click(function () {
        $(this).addClass('active').siblings().removeClass('active');
        $('.mainimg-pic>img').attr('src', $(this).find('img').attr("big"));
        $('.bigimg>img').attr('src', $(this).find('img').attr("big"));
        return false
    })
    $('.mainimg-pic').hover(
        function () {
            $('.mask').show();
            $('.bigimg').show();
            $('.mainimg-pic').mousemove(e => {
                var x = e.pageX;
                var y = e.pageY;
                var left = x - $('.mask').width() / 2;

                var top = y - $('.mask').height() / 2;
                if (left < $('.mainimg-pic').offset().left) left = $('.mainimg-pic').offset().left;
                if (top < $('.mainimg-pic').offset().top)
                    top = $('.mainimg-pic').offset().top;
                if (left > $('.mainimg-pic').offset().left + $('.mainimg-pic').width() - $('.mask').width())
                    left = $('.mainimg-pic').offset().left + $('.mainimg-pic').width() - $('.msak').width();
                if (top > $('.mainimg-pic').offset().top + $('.mainimg-pic').height() - $('.mask').height())
                    top = $('.mainimg-pic').offset().top + $('.mainimg-pic').height() - $('.mask').height();
                $('.mask').offset({
                    top,
                    left
                })

                var bigLeft = (left - $('.mainimg-pic').offset().left) / $('.mainimg-pic').width() * $('.bigimg img').width()
                var bigTop = (top - $('.mainimg-pic').offset().top) / $('.mainimg-pic').height() * $('.bigimg img').height()

                $('.bigimg img').css({
                    left: -bigLeft + "px",
                    top: -bigTop + "px"
                })
            })
        },
        function () {
            $('.mask').hide();
            $('.bigimg').hide()
        })
}